<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>商品列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "微软雅黑";
            background: #eee;
        }

        button {
            display: inline-block;
            padding: 6px 12px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            border-color: #28a4c9;
            color: #fff;
            background-color: #5bc0de;
            margin: 20px 20px 0 0;
        }

        .box {
            width: 800px;
            margin: 100px auto 0;
            height: 34px;
        }

        .page {
            width: 600px;
        }

        .info {
            width: 200px;
            height: 34px;
            line-height: 34px;
        }

        .fl {
            float: left;
        }
    </style>
</head>
<p>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap/css/default.css">
    <!-- Custom styles for this template -->
    <link href="${pageContext.request.contextPath}/static/css/carousel.css" rel="stylesheet">

    <%--引入分页控件所需css文件--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/jquery.pagination.css"/>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/functions.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/cart.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/static/css/bootstrap/js/bootstrap.min.js"></script>

    <%--引入分页控件所需js文件--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery.pagination.min.js"></script>

    <script>
        $(function () {
            var currentPage = ${page.currentPage};
            var totalPage = ${page.totalPage};

            //TODO 当前页高亮显示

            $("#pagination1").pagination({
                currentPage: currentPage,
                totalPage: totalPage,
                callback: function (current) {//current 当前页
                    var info = $("#pagination1").pagination("getPage");
                    location.href = "${pageContext.request.contextPath}/order/getMyOrders?status=" + '${param.status}' + "&currentPage=" + info.current;
                }
            });
        });

        function handleOrder(orderId, status, msg, e) {
            if (confirm(msg)) {
                var os = $(e.target).parent().parent("#orderStatus");
                //alert($(e.target).parent().parent("#orderStatus").attr("id"))
                $.post("${pageContext.request.contextPath}/order/handleOrderStatus", {
                    oid: orderId,
                    status: status
                }, function (result) {
                    if (checkLogin(result)) {
                        if (result.type == "success") {
                            if (result.status == -1) {
                                os.html("已提交退款申请，请等待商家处理");
                            }
                            else if (result.status == 3) {
                                os.html("交易成功<div class=\"text-right\"><a href=\"${pageContext.request.contextPath}/order/delOrder?orderId=" + orderId + " onclick=\"return confirm('确定要删除这个订单吗？')\">删除订单</a></div>");
                            }
                            else if (result.status == -5) {
                                os.html("已提交退货申请，请等待商家处理");
                            }
                            else if (result.status == -3) {
                                os.html("交易关闭<div class=\"text-right\"><a href=\"${pageContext.request.contextPath}/order/delOrder?orderId=" + orderId + " onclick=\"return confirm('确定要删除这个订单吗？')\">删除订单</a></div>");
                            }
                            $("#msgTitle").html("操作成功");
                            $("#msgBody").html("订单操作成功");
                            $("#msgModal").modal();
                        } else if (result.type == "fail") {
                            $("#msgTitle").html("操作失败");
                            $("#msgBody").html("抱歉，目前的订单状态无法进行此操作");
                            $("#msgModal").modal();
                        } else {
                            $("#msgTitle").html("操作失败");
                            $("#msgBody").html("操作订单失败");
                            $("#msgModal").modal();
                        }
                    }
                }, "json");
            }
        }
    </script>

    <c:import url="../common/userTopNav.jsp"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="list-group">
                <ul class="nav nav-pills nav-stacked" id="left_order">
                    <li <c:if test="${empty param.status}">class='active'</c:if>><a
                            href="${pageContext.request.contextPath}/order/getMyOrders">全部订单</a></li>
                    <li <c:if test="${not empty param.status && param.status==0}">class='active'</c:if>><a
                            href="${pageContext.request.contextPath}/order/getMyOrders?status=0">待付款订单</a></li>
                    <li <c:if test="${param.status==1}">class='active'</c:if>><a
                            href="${pageContext.request.contextPath}/order/getMyOrders?status=1">待发货订单</a></li>
                    <li <c:if test="${param.status==2}">class='active'</c:if>><a
                            href="${pageContext.request.contextPath}/order/getMyOrders?status=2">待收货订单</a></li>
                    <li <c:if test="${param.status==-2}">class='active'</c:if>><a
                            href="${pageContext.request.contextPath}/order/getMyOrders?status=-2">已退款订单</a></li>
                    <li <c:if test="${param.status==-1}">class='active'</c:if>><a
                            href="${pageContext.request.contextPath}/order/getMyOrders?status=-4">已退货订单</a></li>
                    <li <c:if test="${param.status==3}">class='active'</c:if>><a
                            href="${pageContext.request.contextPath}/order/getMyOrders?status=3">交易成功订单</a></li>
                    <li <c:if test="${param.status==-3}">class='active'</c:if>><a
                            href="${pageContext.request.contextPath}/order/getMyOrders?status=-3">交易关闭订单</a></li>
                </ul>
            </div>
        </div>

        <div class="col-md-10"></div>
        <c:if test="${not empty page.data}">
            <div class="col-md-10 ">
                <c:forEach items="${page.data}" var="vo">
                    <div class="panel panel-info">
                        <div class="panel-heading ">
                            下单日期：<fmt:formatDate value="${vo.order.date}" pattern="yyyy-MM-dd"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            订单号：<a
                                href="${pageContext.request.contextPath}/order/getOrderDetailByOid?oid=${vo.order.oid}">${vo.order.oid}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            订单状态：
                            <span id="orderStatus">
                        <c:if test="${vo.order.status==-3}">交易关闭</c:if>
                        <c:if test="${vo.order.status==-2}">退款成功</c:if>
                        <c:if test="${vo.order.status==-4}">退货成功</c:if>
                        <c:if test="${vo.order.status==-1}">已提交退款申请，请等待商家处理</c:if>
                        <c:if test="${vo.order.status==-5}">已提交退货申请，请等待商家处理</c:if>
                        <c:if test="${vo.order.status==0}">等待付款</c:if>
                        <c:if test="${vo.order.status==1}">未发货</c:if>
                        <c:if test="${vo.order.status==2}">已发货</c:if>
                        <c:if test="${vo.order.status==3}">交易成功</c:if>
                        <div class="text-right">
                            <c:if test="${vo.order.status==0}">
                                <a href="#" onclick="handleOrder('${vo.order.oid}',-3,'确定要取消这个订单吗？',event);">取消订单</a>|
                                <a href="${pageContext.request.contextPath}/order/toPay?oid=${vo.order.oid}">去付款</a>
                            </c:if>
                            <c:if test="${vo.order.status==1}">
                                <a href="#" onclick="handleOrder('${vo.order.oid}',-1,'确定要申请退款吗？',event)">申请退款</a>
                            </c:if>
                            <c:if test="${vo.order.status==2}">
                                <a href="#" onclick="handleOrder('${vo.order.oid}',3,'确定要确认收货吗？',event);">确认收货</a>|
                                <a href="#" onclick="handleOrder('${vo.order.oid}',-5,'确定要申请退货吗？',event);">申请退货</a>
                            </c:if>
                            <c:if test="${vo.order.status==3||vo.order.status==-3}">
                                <a href="${pageContext.request.contextPath}/order/deleteOrder?oid=${vo.order.oid}"
                                   onclick="return confirm('确定要删除订单吗？');">删除订单</a>
                            </c:if>
                        </div>
                    </span>
                        </div>
                        <div class="panel-body">
                            <table class="table table-hover table-condensed table-bordered">
                                <tbody>
                                <c:forEach items="${vo.itemList}" var="item" varStatus="status">
                                    <c:if test="${not empty item.product.name}">
                                        <tr>
                                            <td><img src="${item.product.url}" width="30" height="30"></td>
                                            <td>
                                                <a href="${pageContext.request.contextPath}/product/getProductDetail?pid=${item.product.pid}">${item.product.name}
                                                    &nbsp;&nbsp;${item.item.size}&nbsp;&nbsp;${item.item.color}</a>
                                            </td>
                                            <td><span
                                                    class="glyphicon glyphicon-yen"></span><s>${item.product.price}</s>
                                            </td>
                                            <td>${item.item.count}件</td>
                                            <td><span class="glyphicon glyphicon-yen"></span>${item.product.offPrice}
                                            </td>
                                        </tr>
                                    </c:if>

                                    <c:if test="${empty item.product.name}">
                                        <tr>
                                            <center><B>商品${status.count}已下架</B></center>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                                </tbody>
                            </table>
                            <table class="table table-condensed">
                                <tr>
                                    <td>
                                        <button class="btn btn-info" id="back" type="button"
                                                onclick="javascript:location.href='${pageContext.request.contextPath}/order/getOrderDetailByOid?oid=${vo.order.oid}'">
                                            查看订单详情
                                        </button>
                                    </td>
                                    <td class="text-right">总金额（含运费${vo.order.freight}元）：
                                        <span class="glyphicon glyphicon-yen"></span>${vo.order.total}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </c:if>
        <c:if test="${empty page.data}">
            <h2>
                <center>没有相关的订单信息</center>
            </h2>
        </c:if>
    </div>
</div>

<center>
    共&nbsp;${page.totalCount}&nbsp;条记录&nbsp;&nbsp;${page.totalPage}&nbsp;页
</center>
<c:if test="${not empty page.data}">
    <p>
            <%--分页--%>
    <div id="pagination1" class="page fl" style="margin-bottom: 0.5cm;margin-left: 23cm"></div>
    </p>
</c:if>

<c:import url="../common/userFooter.jsp"/>
</body>
</html>